<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>角色维护</title>

		<link rel="stylesheet" href="../css/index.css">
		<script src="../js/vue.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/mycommon.js"></script>

		<style>
			.page {
				position: fixed;
				bottom: 0;
				height: 35%;
				width: 85%;
				text-align: center;
			}
		</style>

	</head>

	<body>

		<div id="app">


			<fieldset style="border: 1px solid gainsboro;margin-bottom: 4px;">
				<legend><i class="el-icon-search" style="color:#bfb6a3 ;">查询</i></legend>
				<el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="角色名字">
						<el-input v-model="formInline.rolename" placeholder="标题"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="selectTj">查询</el-button>
						<el-button type="warning" @click="open">增加角色</el-button>
					</el-form-item>
				</el-form>
			</fieldset>





			<!--查询开始-->
			<el-row>
				<!-- <el- :span="20"> -->
				<el-table size="big" :data="tableData" border style="width: 100%" :cell-style="{'text-align':'center'}"
					:header-cell-style="{'text-align':'center'}">
					<el-table-column prop="id" label="角色id" width="250">
					</el-table-column>
					<el-table-column prop="rolename" label="角色名字" width="250">
					</el-table-column>
					<el-table-column prop="remark" label="备注" width="250">
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button type="primary" size="mini"
								@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="mini" type="danger"
								@click="handleDelete(scope.$index, scope.row)">删除</el-button>
							<el-button size="mini" type="danger"
								@click="handleOpenRole(scope.$index, scope.row)">权限</el-button>
							<el-button size="mini" type="danger" @click="menu(scope.$index, scope.row)">菜单树</el-button>
						</template>
					</el-table-column>
				</el-table>

			</el-row>
			<!-- 分页 -->
			<div class="page">
				<el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next"
					:total="tocal" :page-size="pagesize">
				</el-pagination>
			</div>

			<!-- 分页 -->

			<!--查询结束-->

			<!--增加角色开始-->
			<el-dialog title="增加角色" :visible.sync="dialogVisible" width="50%">

				<el-form ref="form" :model="sizeForm" label-width="100px" size="mini">
					<el-form-item label="角色名字">
						<el-input v-model="sizeForm.rolename"></el-input>
					</el-form-item>

					<el-form-item label="备注">
						<el-input v-model="sizeForm.remark"></el-input>
					</el-form-item>
				</el-form>

				<span slot="footer" class="dialog-footer">
					<el-button size="mini" @click="dialogVisible = false">取 消</el-button>
					<el-button size="mini" type="primary" @click="onSubmit">确 定</el-button>
				</span>
			</el-dialog>
			<!--增加角色结束-->

			<!-- 角色对应拥有者的权限 -->
			<el-dialog title="角色权限" :visible.sync="dialogFormVisibleRole">
				<template>
					<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
						<el-tab-pane label="角色所属用户管理" name="first">


							<template>
								<el-checkbox-group v-model="checkListuser">
									<template v-for="usertallarrobj in userallarr">
										<el-checkbox :label="usertallarrobj.id"
											@change="handleCheckedCitiesChange($event,usertallarrobj.id)">{{usertallarrobj.sysusername}}
										</el-checkbox>
									</template>
								</el-checkbox-group>
							</template>
						</el-tab-pane>

						<el-tab-pane label="角色所属部门管理" name="second">
							<template>
								<el-checkbox-group v-model="checkListdep">
									<template v-for="depallarrobj in depallarr">
										<el-checkbox :label="depallarrobj.id"
											@change="handleCheckedCitiesChange($event, '{'+depallarrobj.id+'}')">{{depallarrobj.department}}
										</el-checkbox>
									</template>
								</el-checkbox-group>
							</template>
						</el-tab-pane>


						<el-tab-pane label="角色所属岗位管理" name="third">

							<template>
								<el-checkbox-group v-model="checkListpos">
									<template v-for="postallarrobj in posallarr">
										<el-checkbox :label="postallarrobj.id"
											@change="handleCheckedCitiesChange($event, '['+postallarrobj.id+']')">{{postallarrobj.post}}
										</el-checkbox>
									</template>
								</el-checkbox-group>
							</template>

						</el-tab-pane>
						<el-tab-pane label="角色所属工种管理" name="third1	">




							<template>
								<el-checkbox-group v-model="checkListjob">
									<template v-for="jobtallarrjob in joballarr">
										<el-checkbox :label="jobtallarrjob.id"
											@change="handleCheckedCitiesChange($event, '('+jobtallarrjob.id+')')">{{jobtallarrjob.jobtype}}
										</el-checkbox>
									</template>
								</el-checkbox-group>
							</template>

						</el-tab-pane>
					</el-tabs>
				</template>
			</el-dialog>

			<el-dialog title="添加角色部门" :visible.sync="dep" width="50%">
				<el-form ref="form" :model="sizeForm" label-width="100px" size="mini">
				</el-form>
			</el-dialog>



			<!-- 角色对应权限菜单结束 -->




			<!--修改角色开始-->
			<el-dialog title="修改角色" :visible.sync="dialogVisible1" width="50%">

				<el-form ref="form1" :model="sizeForm1" label-width="100px" size="mini">
					<el-form-item label="角色名字" prop="rolename">
						<el-input v-model="sizeForm1.rolename"></el-input>
					</el-form-item>

					<el-form-item label="备注" prop="remark">
						<el-input v-model="sizeForm1.remark"></el-input>
					</el-form-item>
				</el-form>

				<span slot="footer" class="dialog-footer">
					<el-button size="mini" @click="dialogVisible1 = false">取 消</el-button>
					<el-button size="mini" type="primary" @click="dian">确 定</el-button>
				</span>
			</el-dialog>
			<!--修改角色结束-->

			<el-drawer title="修改菜单树" :visible.sync="drawer" :direction="direction" :before-close="handleClose">

				<el-col :span="20">
					<el-tree ref="tree" check-strictly="true" default-expand-all :data="data" show-checkbox
						node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="thie"
						:props="defaultProps">
					</el-tree>
				</el-col>
				<el-button size="mini" type="primary" @click="drawers()">确 定</el-button>

			</el-drawer>

		</div>

		<script>
			var vm = new Vue({
				el: "#app",

				data: {

					checkListdep: [], //默认选择的部门
					depallarr: [], //所有部门
					checkListpos: [], //默认选择的岗位
					posallarr: [], //所有岗位
					checkListjob: [], //默认选择的工种
					joballarr: [], //所有工种
					checkListuser: [], //默认选择的用户
					userallarr: [], //所有用户
					activeName: 'first',
					tableData: [],
					formInline: {
						rolename: ''
					},
					//权限菜单数据
					listJob: [],
					listDep: [],
					listPos: [],
					listUser: [],

					dep: false,
					dialogFormVisibleRole: false,
					drawer: false,
					direction: 'rtl',
					dialogVisible: false,
					sizeForm: {
						rolename: '',
						remark: ''
					},
					sizeForm1: {
						rolename: '',
						remark: ''
					},
					data: [],
					defaultProps: {
						children: 'children',
						label: 'label'
					},
					dialogVisible1: false,
					page: 1, //当前第几页
					tocal: 0, //总条数
					pagesize: 5, //每页条数
					thie: [], //默认菜单,修改前菜单id

					upid: 0, //存入角色id

				},
				methods: {
					handleCurrentChange(val) { //分页
						this.page = val //舍子当前页
						this.initdata() //发送ajax请求重新获取数据
					},
					handleClick(tab, event) {
						console.log(tab, event);
					},
					handleCurrentChange(val) { //分页
						this.page = val //设置当前页
						this.initdata() //发送ajax请求重新获取数据
					},
					handleOpenRole(index, row) { //角色权限维护
						this.upid = row.id //设置角色id
						this.depallall() //获取所有的部门
						this.postall() //获取所有岗位
						this.jobtypeall() //获取所有工种
						this.userall() //获取所有用户信息

						//角色对应的人员部门岗位
						this.dialogFormVisibleRole = true
						var that = this
						//ajax请求后端接口获取json数据
						axios.post(HTTP + "sysuserMidrole/selectRoleid", {
							"roleid": row.id
						}).then(function(res) {
							// alert(JSON.stringify(res.data.data.listDep));
							that.listDep = res.data.data.listDep //角色拥有的部门
							that.listJob = res.data.data.listJob //角色拥有的工种
							that.listPos = res.data.data.listPos //角色拥有的部门
							that.listUser = res.data.data.listUser //角色拥有的用户

							that.checkListdep = []
							res.data.data.listDep.forEach(function(obj) { //设置部门默认选中
								that.checkListdep.push(obj.bid)
							})

							that.checkListjob = []
							res.data.data.listJob.forEach(function(obj) { //设置工种默认选中
								that.checkListjob.push(obj.bid)
							})

							that.checkListpos = []
							res.data.data.listPos.forEach(function(obj) { //设置岗位默认选中
								that.checkListpos.push(obj.bid)
							})

							that.checkListuser = []
							res.data.data.listUser.forEach(function(obj) { //设置角色默认选中
								that.checkListuser.push(obj.bid)
							})
						}).catch(err => {
							console.log(err)
						});


					},
					//删除角色用户
					handleClickUser(tag) {
						var that = this
						//ajax请求后端接口获取json数据
						axios.post(HTTP + "sysuserMidrole/delUserByid", {
							"id": tag.id
						}).then(function(res) {
							//alert(JSON.stringify(res));
							that.listUser.splice(that.listUser.indexOf(tag), 1)

							if (res.data.code == 200) {
								//删除成功
								that.$message('删除成功')
							}

						}).catch(err => {
							console.log(err)
						});
					},
					//删除角色部门
					handleClickDep(tag) {

						var that = this
						//ajax请求后端接口获取json数据
						axios.post(HTTP + "sysuserMidrole/delUserByid", {
							"id": tag.id
						}).then(function(res) {
							//alert(JSON.stringify(res));
							that.listDep.splice(that.listDep.indexOf(tag), 1)

							if (res.data.code == 200) {
								//删除成功
								that.$message('删除成功')

								that.page = 1
								that.initdata()
							}


						}).catch(err => {
							console.log(err)
						});
					},
					//删除角色岗位
					handleClickPos(tag) {

						var that = this
						//ajax请求后端接口获取json数据
						axios.post(HTTP + "sysuserMidrole/delUserByid", {
							"id": tag.id
						}).then(function(res) {
							//alert(JSON.stringify(res));
							that.listPos.splice(that.listPos.indexOf(tag), 1)

							if (res.data.code == 200) {
								//删除成功
								that.$message('删除成功')

								that.page = 1
								that.initdata()
							}


						}).catch(err => {
							console.log(err)
						});
					},
					//删除角色工种
					handleClickJob(tag) {

						var that = this
						//ajax请求后端接口获取json数据
						axios.post(HTTP + "sysuserMidrole/delUserByid", {
							"id": tag.id
						}).then(function(res) {
							//alert(JSON.stringify(res));
							that.listJob.splice(that.listUser.indexOf(tag), 1)

							if (res.data.code == 200) {
								//删除成功
								that.$message('删除成功')

								that.page = 1
								that.initdata()
							}


						}).catch(err => {
							console.log(err)
						});
					},
					//查询修改角色
					handleEdit(index, row) {


						console.log(index, row);
						this.dialogVisible1 = true
						var that = this
						axios.post(HTTP + "role/upselect", {
							"id": row.id
						}).then(function(res) {
							that.sizeForm1 = res.data.data.one

						}).catch(err => {
							console.log(err)
						});
					},
					dian() {
						//提交修改数据
						this.dialogVisible1 = false
						var that = this
						axios.post(HTTP + "role/up", this.sizeForm1).then(function(res) {
							if (res.data.code == 200) {
								that.$message('修改成功')
								that.initdata()
							}
						}).catch(err => {
							console.log(err)
						});
					},
					//删除角色
					handleDelete(index, row) {
						console.log(index, row);
						var that = this
						axios.post(HTTP + "role/del", {
							"id": row.id
						}).then(function(res) {
							if (res.data.code == 200) {
								that.$message('删除成功')
								that.initdata()
							}
						}).catch(err => {
							console.log(err)
						});
					},
					onSubmit() {
						//增加角色
						console.log('submit!');
						//执行业务提交
						this.dialogVisible = false
						var that = this
						//alert(JSON.stringify(this.sizeForm))
						axios.post(HTTP + "role/add", this.sizeForm).then(function(res) {
							if (res.data.code == 200) {
								that.$message('增加角色成功')
								that.initdata()
							}
						}).catch(err => {
							console.log(err)
						});

					},
					open() {
						this.dialogVisible = true
					},
					initdata() { //查询数据
						var that = this
						//ajax请求后端接口获取json数据
						axios.get(HTTP + "role/select/" + that.page).then(function(res) {
							//alert(JSON.stringify(res));
							that.tableData = res.data.data.rolePageInfo.list
							that.tocal = res.data.data.rolePageInfo.total

						}).catch(err => {
							console.log(err)
						});
					},
					handleDelete1(index, row) {
						//查询角色对应的菜单
						var that = this
						//ajax请求后端接口获取json数据

					},
					menu(index, row) {
						//获取所有菜单
						this.drawer = true
						var that = this
						this.upid = row.id
						//ajax请求后端接口获取json数据
						axios.get(HTTP + "menu/selectRole").then(function(res) {
							console.log(res.data.data.list);
							var treejson = arrayToTree(res.data.data.list)
							console.log(treejson);
							that.data = treejson

						}).catch(err => {
							console.log(err)
						});

						//ajax请求后端接口获取json数据
						axios.post(HTTP + "RolemidmenuController/select", {
							"roleid": row.id
						}).then(function(res) {
							//alert(JSON.stringify(res.data.data.list));

							let thie1 = res.data.data.list
							let cktree = []
							for (let i = 0; i < thie1.length; i++) {
								cktree.push(thie1[i].menuid)
							}
							that.$refs.tree.setCheckedKeys(cktree)

						}).catch(err => {
							console.log(err)
						});
						//this.thie=this.$refs.tree.getCheckedKeys()
					},
					drawers() {
						//修改角色对应的菜单权限
						var that = this
						// this.$confirm('确认修改？')
						let thieUp = this.$refs.tree.getCheckedKeys()
						axios.post(HTTP + "RolemidmenuController/up", {
							"roleid": this.upid,
							"menuid": thieUp
						}).then(function(res) {
							//alert(JSON.stringify(res.data.data.list));
							if (res.data.code == 200) {
								that.$message('修改成功')
								that.initdata()
								that.drawer = false
							}

						}).catch(err => {
							console.log(err)
						});

					},
					depEdit() {
						this.dep = true

					},
					handleClose(done) {

						//关闭抽屉
						this.$confirm('确认修改？')
							.then(_ => {
								var that = this
								let thieUp = this.$refs.tree.getCheckedKeys()
								axios.post(HTTP + "RolemidmenuController/up", {
									"roleid": this.upid,
									"menuid": thieUp
								}).then(function(res) {
									//alert(JSON.stringify(res.data.data.list));

									if (res.data.code == 200) {
										that.$message('修改成功')
										that.initdata()
									}

								}).catch(err => {
									console.log(err)
								});

								done();

							})
							.catch(_ => {
								done();
							});
					},
					selectTj() {
						//根据条件查询
						var that = this
						//alert(JSON.stringify(this.formInline))
						axios.post(HTTP + "role/selectTj", this.formInline).then(function(res) {
							//alert(JSON.stringify(res));
							that.tableData = res.data.data.rolePageInfo.list
							that.tocal = res.data.data.rolePageInfo.total

						}).catch(err => {
							console.log(err)
						});
					},
					depallall() { //获取所有的部门
						var that = this
						axios.post(HTTP + "department/select").then(function(res) {
							// alert(JSON.stringify(res.data.data.list));
							that.depallarr = res.data.data.list
						}).catch(err => {
							console.log(err)
						});
					},
					postall() {
						//获取所有岗位
						var that = this
						axios.post(HTTP + "ost/select").then(function(res) {
							//alert(JSON.stringify(res));
							that.posallarr = res.data.data.list
						}).catch(err => {
							console.log(err)
						});
					},
					jobtypeall() {
						//获取所有工种
						var that = this
						axios.post(HTTP + "jobtype/select").then(function(res) {
							that.joballarr = res.data.data.list
						}).catch(err => {
							console.log(err)
						});
					},
					userall() {
						//获取所有工种
						var that = this
						axios.post(HTTP + "user/select").then(function(res) {
							//alert(JSON.stringify(res));
							that.userallarr = res.data.data.list
						}).catch(err => {
							console.log(err)
						});
					},
					handleCheckedCitiesChange(value, a) { //部门复选框单击事件
						//value 是否选中  a 部门id   his.upid当前选中角色id
						//alert(a);
						/* if (a.includes(“[”)){
							alert(a);
						} */

						let va = value
						if (va == true) {

							var that = this
							axios.post(HTTP + "sysuserMidrole/addcheckListdep", {
								"roleid": this.upid,
								"ids": a
							}).then(function(res) {
								//alert(JSON.stringify(res));
								if (res.data.code == 200) {
									that.$message('修改成功')
									that.initdata()
								}
							}).catch(err => {
								console.log(err)
							});

							axios.post(HTTP + "user/upuser", {
								"userrole": this.upid,
								"id": a
							}).then(function(res) {
								//alert(JSON.stringify(res));

							}).catch(err => {
								console.log(err)
							});



						} else if (va == false) {
							var that = this
							axios.post(HTTP + "sysuserMidrole/delcheckListdep", {
								"roleid": this.upid,
								"ids": a
							}).then(function(res) {
								//alert(JSON.stringify(res));
								if (res.data.code == 200) {
									that.$message('删除成功')
									that.initdata()
								}
							}).catch(err => {
								console.log(err)
							});
						}

					}
				},

				mounted() { //vue生命周期的方法
					//发送ajax请求到后端接口，获取json数据
					this.initdata()
				}
			})
		</script>

	</body>

</html>